<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        input { height: 30px ; margin:10px 0 0}
    </style>
</head>
<body>
<div>
    <!--msgFromJS.value 是输入内容-->
    <input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/>
    <input id="msgFromJS" type="text" placeholder="在html侧发送消息到ArkTS侧，请输入内容"/><br/>
</div>
<p class="output">这里显示ArkTS发送的消息</p>
</body>
<script>
    var h5Port;
    var output = document.querySelector('.output');
    window.addEventListener('message', function (event) {
        if (event.data === '__init_port__') {
            if (event.ports[0] !== null) {
                h5Port = event.ports[0]; // 1. 保存从应用侧发送过来的端口。
                h5Port.onmessage = function (event) {
                  // 2. 接收ets侧发送过来的消息。
                  var msg = '来自ArkTS的消息: ';
                  var result = event.data;
                  if (typeof(result) === 'string') {
                    console.info(`在html5侧接收ArkTS发送的字符串数据, string is: ${result}`);
                    msg = msg + result;
                  } else if (typeof(result) === 'object') {
                    if (result instanceof ArrayBuffer) {
                      console.info(`在html5侧接收ArkTS发送的ArrayBuffer数据, length is: ${result.byteLength}`);
                      msg = msg + 'lenght is ' + result.byteLength;
                    } else {
                      console.info('不支持的数据类型');
                    }
                  } else {
                    console.info('不支持的数据类型');
                  }
                  output.innerHTML = msg;
                }
            }
        }
    })
    // 3. 使用h5Port向应用侧发送消息。
    function PostMsgToEts(data) {
        if (h5Port) {
          h5Port.postMessage(data);
        } else {
          console.error('h5Port为null，请先初始化');
        }
    }
</script>
</html>